<template>
  <div class="job-list-container">
    <div class="list">
      <ArticleItem v-for="article in articles" :key="article.id" :article="article" articleType="news" />
    </div>
  </div>
</template>

<script>

import ArticleItem from "~/components/ArticleItem.vue";

export default {
  layout: "dark",
  components: {
    ArticleItem,
  },

  async asyncData({ $axios }) {
    try {
      const { data } = await $axios.get("/api/news");
      // console.log(data);
      return {
        articles: data,
      };
      
    } catch (error) {
      console.log(error);
      return {
        articles: [],
      };
    }
  },
};
</script>

<style>
.job-list-container {
  display: flex;
  width: 100%;
  height: calc(100vh - 60px);
  background-color: transparent;

  .list {
    width: 900px;
    background-color: #fff;
    margin: 0 auto;
    overflow: auto;
  }
}
</style>
